<template>
    <el-upload 
        ref="files" 
        action="http://localhost/api/uploadBlog" 
        list-type="picture-card" 
        :auto-upload="false"
        :on-change="changeFileInfo"
        :data="blog"
    >
        <el-icon><Plus /></el-icon>
        <!-- file是个啥啊，我也不知道 -->
        <template #file="{ file }"> 
        <div class="picture">
            <!-- 乱七八糟得样式别乱改，居然还有用 -->
            <el-image class="el-upload-list__item-thumbnail" :src="file.url" />
            <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                    <el-icon><zoom-in /></el-icon>
                </span>
                <span class="el-upload-list__item-delete" @click="handleRemove(file)">
                    <el-icon><Delete /></el-icon>
                </span>
            </span>
        </div>
    </template>
    <el-dialog v-model="dialogVisible">
        <el-image fit="cover" :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
  </el-upload>
</template>

<script>
import { Plus, ZoomIn,  Delete } from '@element-plus/icons-vue'
import { ref } from '@vue/reactivity'

export default {
    name: 'CoverUpload',
    components: {
        Plus,
        ZoomIn,
        Delete
    },
    props: ['blog'],
    setup(props, context) {
        let files = ref(null)//获取upload的dom
        let dialogImageUrl = ref('')//记录要放大的图片url
        let dialogVisible = ref(false)//放大图片的开关 

        const handlePictureCardPreview = (file) => {
            dialogImageUrl.value = file.url
            dialogVisible.value = true
        }
        const handleRemove = (file) => {
            files.value.handleRemove(file)
            context.emit('receiveCoverStatus', false)
        }
        const changeFileInfo = (file, fileList) => {
            //console.log(file)
            context.emit('receiveCoverStatus', true)
            if (fileList.length > 1) {
                fileList.splice(0,1)//感谢csdn的大神，自带的limit属性有bug，这下完美了
            }
        }    

        return {
            files,
            dialogVisible,
            dialogImageUrl,
            handlePictureCardPreview,
            handleRemove,
            changeFileInfo
        }
    }
}
</script>

<style scoped>
    .picture {
        margin: 0 auto;
    }
</style>